<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/mi_project/css/swiper.min.css">
    <script src="/mi_project/js/swiper.js"></script>
    <script src="/mi_project/js/jquery.js"></script>
    <script src="/mi_project/js/jquery.cookie.js"></script>
    <script src="/mi_project/js/common.js"></script>
    <link rel="stylesheet" href="/mi_project/css/base.css">
    <link rel="stylesheet" href="/mi_project/css/index.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2917027_4icbe1xja37.css">
</head>

<body>
    <div class="header-1">
        <!-- <div class="w">
            <div class="header-1fl">
                <a href="index.html">小米商城</a><span>|</span>
                <a href="javascript:;">MIUI</a><span>|</span>
                <a href="javascript:;">loT</a><span>|</span>
                <a href="javascript:;">云服务</a><span>|</span>
                <a href="javascript:;">天星数科</a><span>|</span>
                <a href="javascript:;">有品</a><span>|</span>
                <a href="javascript:;">小爱开放平台</a><span>|</span>
                <a href="javascript:;">企业团购</a><span>|</span>
                <a href="javascript:;">资质证照</a><span>|</span>
                <a href="javascript:;">协议规则</a><span>|</span>
                <a href="javascript:;">下载app</a><span>|</span>
                <a href="javascript:;">智能生活</a><span>|</span>
                <a href="javascript:;">Select Location</a>
            </div>
            <div class="header-1fr">
                <a href="login.html">登录</a><span>|</span>
                <a href="register.html">注册</a><span>|</span>
                <a href="">消息通知</a>
                <a href="cart.html"><i class="iconfont icon-gouwuchekong"></i>购物车 (0)</a>
            </div>
        </div> -->
    </div>
    <div class="header-2">
        <!-- <div class="w">
            <div class="loge"><a href=""></a></div>
            <div class="header-nav">
                <a href="">Xiaomi手机</a><a href="">Redmi 手机</a><a href="">电视</a><a href="">笔记本</a><a href="">平板</a><a
                    href="">家电</a><a href="">路由器</a><a href="">服务</a><a href="">社区</a>
            </div>
            <div class="header-search">
                <input type="text">
                <input type="submit" class="iconfont" value="&#xe8d6;">
            </div>
        </div> -->

    </div>
    <div class="swiperBanner w">
        <div class="bannerlist">
            <!-- <li>2
                <div class=" bannerlist-2Box">
                    <dl class=" bannerlist-2">
                        <a href="javascript:;" style="display: inline-block; color: #fff;">
                            <dt></dt>
                            <dd>22</dd>
                        </a>
                    </dl>
                    <dl class=" bannerlist-2">
                        <dt></dt>
                        <dd>33</dd>
                        <div class=" bannerlist-3Box">
                            <dl class=" bannerlist-3">
                                <dt></dt>
                                <dd>44</dd>
                            </dl>
                            <dl class=" bannerlist-3">
                                <dt></dt>
                                <dd>33</dd>
                            </dl>
                        </div>
                    </dl>
                </div>
            </li> -->
        </div>
        <div class="swiper-container">
            <div class="swiper-wrapper">
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination swiper-pagination-white"></div>
            <!-- Add Arrows -->
            <div class="swiper-button-next swiper-button-white"></div>
            <div class="swiper-button-prev swiper-button-white"></div>
        </div>
    </div>
    <div class="topGoodsBox">
        <div class="w">
            <div class="topGoodsServer"></div>
            <div class="topGoods"></div>
            <div class="topGoods"></div>
            <div class="topGoods"></div>
        </div>
    </div>
    <div class="topGoodsList">
        <header class="w">
            <h3>手机</h3>
            <div>
                <span>查看更多</span>
                <i class="iconfont icon-bg-right"></i>
            </div>
        </header>
        <main class="w">
            <div class="topGoodsList-left"></div>
            <div class="topGoodsList-right">
                <!-- <dl>
                    <dt class="topGoodsImg"></dt>
                    <dd class="topGoodsName"></dd>
                    <dd class="topGoodsBody"></dd>
                    <dd class="topGood-Price">
                        <del class="topGood-marketPrice"></del>
                        <span class="topGood-shopPrice"></span>
                    </dd>
                </dl> -->
            </div>
        </main>
    </div>
    <div class="autoGoodsBox">
    </div>
</body>

</html>
<script>
    $.ajax({
        url: urls + '/system/homeSlide',
        success: function (backData) {
            for (key in backData.data) {
                let dom = $(`<div class="swiper-slide" style="background-image:url(${backData.data[key].imgUrl})">`);
                dom.html(`<a href=${backData.data[key].link} style="display: inline-block;height: 100%;width: 100%;"></a>`);
                $('.swiper-wrapper').append(dom);
            }
            let swiper = new Swiper('.swiper-container', {
                spaceBetween: 30,
                effect: 'fade',
                loop: true,
                autoplay: {
                    delay: 1000,
                },
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                },
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
            });
        }
    })
    $.ajax({
        url: urls + '/system/indexData',
        success: function (backData) {
            let i = 0;
            for (key in backData.data.topAd) {
                $('.topGoods').eq(i).prop('style', `background-image:url(${backData.data.topAd[key].imgSrc})`);
                $('.topGoods').eq(i).html(`<a href=${backData.data.topAd[key].href} style="display: inline-block;height: 100%;width: 100%;"></a>`);
                i++;
            }
            i = 0;
            $('.topGoodsList-left').prop('style', `background-image:url(${backData.data.mobile.imgSrc})`);
            for (let key in backData.data.mobile.goods) {
                let dom = $('<dl>');
                dom.html(`
                    <dt class="topGoodsImg" style="background-image:url(${backData.data.mobile.goods[key].goodsImg})"></dt>
                    <dt class="topGoodsName">${backData.data.mobile.goods[key].goodsName}</dt>
                    <dt class="topGoodsBody">${backData.data.mobile.goods[key].goodsBody}</dt>
                    <dd class="topGood-Price">
                        <del class="topGood-marketPrice">${backData.data.mobile.goods[key].marketPrice}</del>
                        <span class="topGood-shopPrice">${backData.data.mobile.goods[key].shopPrice}</span>
                    </dd>
                    `);
                $('.topGoodsList-right').append(dom);
                dom.click(function () {
                    location.href = `details.html?id=${backData.data.mobile.goods[key].id}`;
                })
                i++;
            }

        }
    })
    $.ajax({
        url: urls + '/system/category',
        success: function (backData) {
            for (key in backData.data) {
                let dom = $('<li>')
                dom.html(`<a href="page.html?id=${backData.data[key].id}" style="display: inline-block; color: #fff;">${backData.data[key].cateName}</a><div class=" bannerlist-2Box">`)
                $('.bannerlist').append(dom);
                for (key2 in backData.data[key].children) {
                    dom.find('.bannerlist-2Box').append(`<dl class=" bannerlist-2"><a href="page.html?id=${backData.data[key].children[key2].id}" style="display: inline-block; color: #fff;"><dt style="background-image:url(${backData.data[key].children[key2].icon})"></dt>
                        <dd>${backData.data[key].children[key2].cateName}</dd><div class=" bannerlist-3Box"></div></a></dl>`);
                    for (key3 in backData.data[key].children[key2].children) {
                        dom.find('.bannerlist-3Box').eq(key2).append(`<dl class=" bannerlist-3"><a href="page.html?id=${backData.data[key].children[key2].children[key3].id}" style="display: inline-block; color: #fff;"><dt style="background-image:url(${backData.data[key].children[key2].children[key3].icon})"></dt>
                            <dd>${backData.data[key].children[key2].children[key3].cateName}</dd></a></dl>`);
                    }
                }
            }
        }
    })
    $.ajax({
        url: urls + '/system/recommend',
        success: function (backData) {
            let i = 0;
            for (key in backData.data) {
                $('.autoGoodsBox').append(`<div class="topGoodsList">
            <header class="w">
                <h3 autoGoodsText>${key}</h3>
                <div>
                    <span>查看更多</span>
                    <i class="iconfont icon-bg-right"></i>
                </div>
            </header>
            <main class="w">
                <div class="topGoodsList-right">
                </div>
            </main>
        </div>`);
                for (let key2 in backData.data[key]) {
                    let dom = $('<dl>');
                    dom.html(`
                    <dt class="topGoodsImg" style="background-image:url(${backData.data[key][key2].goodsImg})"></dt>
                    <dt class="topGoodsName">${backData.data[key][key2].goodsName}</dt>
                    <dt class="topGoodsBody">${backData.data[key][key2].goodsBody}</dt>
                    <dd class="topGood-Price">
                        <del class="topGood-marketPrice">${backData.data[key][key2].marketPrice}</del>
                        <span class="topGood-shopPrice">${backData.data[key][key2].shopPrice}</span>
                    </dd>
                    `);
                    $('.autoGoodsBox').find('.topGoodsList-right').eq(i).append(dom);
                    dom.click(function () {
                        location.href = `details.html?id=${backData.data[key][key2].id}`;
                    })
                }
                i++;
            }

        }
    })
    
</script>